<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .img {
            position: absolute;
            width: 200px;
            height: 390px;
            cursor: move;
        }
    </style>
</head>

<body>
    <img src="img/1.jpg" alt="" class="img">
    <script>
        var oImg = document.querySelector('.img');
        var w = (document.body.clientWidth || document.documentElement.clientWidth) - oImg.offsetWidth;
        var h = (document.body.clientHeight || document.documentElement.clientHeight) - oImg.offsetHeight;
        oImg.onmousedown = function(e) {
            var ev = e || event;
            var img = this.cloneNode(true);
            var disX = ev.offsetX;
            var disY = ev.offsetY;
            oImg.style.opacity = '.5';
            document.onmousemove = function(e) {
                document.body.appendChild(img);
                var ev = e || event;
                var l = ev.clientX - disX;
                var t = ev.clientY - disY;
                l = l < 0 ? 0 : (l > w ? w : l);
                t = l < 0 ? 0 : (t > h ? h : t);
                oImg.style.left = l + 'px';
                oImg.style.top = t + 'px';
            }
            document.onmouseup = function() {
                oImg.style.opacity = '1';
                document.body.removeChild(img);
                document.onmousemove = document.onmouseup = null;
            }
            ev.preventDefault = ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
        }

        // var box = document.getElementById("box")
        // var oWarp = document.getElementsByClassName("wrap")[0]
        // box.onmousedown = function() {
        //     var l, t, clone;
        //     box.style.opacity = 0.2
        //     clone = this.cloneNode(true)
        //     document.onmousemove = function() {
        //         // 小div到大div的边距  
        //         //窗口边距到小div点击的距离  
        //         //窗口到大div的距离  
        //         //小div一半的距离  
        //         l = event.clientX - oWarp.offsetLeft - box.clientWidth / 2
        //         t = event.clientY - oWarp.offsetTop - box.clientHeight / 2
        //         oWarp.appendChild(clone)
        //         var maxL, maxT;
        //         maxL = oWarp.clientWidth - box.offsetWidth;
        //         maxT = oWarp.clientHeight - box.offsetHeight;
        //         if (l < 0) {
        //             l = 0
        //         }
        //         if (l > maxL) {
        //             l = maxL
        //         }
        //         if (t < 0) {
        //             t = 0
        //         }
        //         if (t > maxT) {
        //             t = maxT
        //         }
        //         box.style.left = l + "px"
        //         box.style.top = t + "px"
        //     }
        //     document.onmouseup = function() {
        //         document.onmousemove = document.onmouseup = null
        //         box.style.opacity = 1
        //         oWarp.removeChild(clone)
        //     }
        //     return false
        // }
    </script>
</body>

</html>